<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文档练习</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- <p class="text-left">Left aligned text.Left aligned text.Left aligned text.Left aligned text.Left aligned text.Left aligned text.Left aligned text.Left aligned text.Left aligned text.</p>
    <p class="text-center">Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.Center aligned text.</p>
    <p class="text-right">Right aligned text.Right aligned text.Right aligned text.Right aligned text.Right aligned text.Right aligned text.Right aligned text.Right aligned text.Right aligned text.</p>
    <p class="text-justify">Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.</p>
    <p class="text-nowrap">No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.</p> -->


    <!-- 缩略语----当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。
              缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如
              想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。 -->
    <!-- <abbr title="cding is a dashuaibi">cding</abbr>

    <blockquote cite="http://">
      <p>在你的文档中引用其他来源的内容。</p>
      <footer>在你的文档中引用其他来源的内容。</footer>
    </blockquote>
    <dl class="dl-horizontal">
      <dt>cding</dt>
      <dd>cding is a dashuaibi</dd>
    </dl>
    <dl class="dl-horizontal">
      <dt>cding</dt>
      <dd>cding is a dashuaibi</dd>
    </dl>
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

<samp>This text is meant to be treated as sample output from a computer program.</samp>

    <div class="container text-center">
      <div class="jumbotron table-responsive">
        <table class="table table-bordered table-hover table-striped">
          <thead class="success">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </thead>
          <tbody>
            <tr class="warning">
              <td>cding</td>
              <td>26</td>
              <td>nam</td>
            </tr>
            <tr>
              <td>cding</td>
              <td>26</td>
              <td>nam</td>
            </tr>
            <tr>
              <td>cding</td>
              <td>26</td>
              <td>nam</td>
            </tr>
            <tr>
              <td>cding</td>
              <td>26</td>
              <td>nam</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-default">
        dianjiqifei
      </button>
      <button type="button" class="btn btn-default">
        dianjiqifei
      </button>
    </div>
    <button type="button" class="btn btn-warning">
      dianjiqifei
    </button>
    <button type="button" class="btn btn-xs btn-success">
      dianjiqifei
    </button>
    <button type="button" class="btn btn-sm btn-danger">
      dianjiqifei
    </button>

    <form class="" action="index.html" method="post">

    </form>

    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
    <div class="container">
      <div class="jumbotron" style="position:relative;">
        <div class="text-center" style="position:absolute; bottom:0;width:100%">
          <label for="" class="checkbox-inline">
            <input type="radio" name="cding" value="">
            <input type="radio" name="cding" value="">
            <input type="radio" name="cding" value="">
          </label>
        </div>
      </div>
    </div>

    <div class="container">
      <form class="form-horizontal" action="index.html" method="post">
        <div class="form-group">
          <label for="" class="form-control-static col-sm-3 text-right">请选择</label>
          <div class="col-sm-3">
            <select class="form-control"  name="">
              <option value="">1</option>
              <option value="">1</option>
              <option value="">1</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="" class="control-label col-sm-3">请选择</label>
          <div class="col-sm-3">
            <select class="form-control"  name="">
              <option value="">1</option>
              <option value="">1</option>
              <option value="">1</option>
            </select>
          </div>
        </div>
      </form>
    </div>

    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          </div>
        </div>
      </form>
    </div>

    <div class="container">
      <form class="form-inline" action="index.html" method="post">
        <div class="form-group has-success has-feedback">
          <div class="row">
            <div class="col-sm-6">
              <label class="control-label" for="inputSuccess2">Input with success</label>
            </div>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
              <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
          </div>
        </div>
        <br>
        <div class="form-group has-warning has-feedback">
          <label class="control-label" for="inputWarning2">Input with warning</label>
          <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
          <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
          <span id="inputWarning2Status" class="sr-only">(warning)</span>
        </div>
        <br>
        <div class="form-group has-error has-feedback">
          <label class="control-label" for="inputError2">Input with error</label>
          <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
          <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
          <span id="inputError2Status" class="sr-only">(error)</span>
        </div>
        <br>
        <div class="form-group has-success has-feedback">
          <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
          </div>
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
        </div>
      </form>
    </div> -->

    <!-- <div class="btn-group" role="group">
      <button class="btn btn-primary" type="button" id="haha" data-toggle="dropdown">
          asdasd
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="haha">
        <li><a href="#">dasd</a></li>
        <li><a href="#">dasd</a></li>
        <li><a href="#">dasd</a></li>
        <li><a href="#">dasd</a></li>
      </ul>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>

      <div class="btn-group" role="group">
        <button class="btn btn-primary" type="button" id="haha" data-toggle="dropdown">
            asdasd
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="haha">
          <li><a href="#">dasd</a></li>
          <li><a href="#">dasd</a></li>
          <li><a href="#">dasd</a></li>
          <li><a href="#">dasd</a></li>
        </ul>
      </div>
    </div> -->

    <!-- Split button -->
<!-- <div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div> -->

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">ewqe</a></li>

      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">wqeqw</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
  <ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">购物车</a></li>
    <li><a href="#" class="active">商品</a></li>
  </ol>
  <div class="list-group">
    <a href="#" class="list-group-item">nihao<span class="badge">4</span></a>
    <a href="#" class="list-group-item">nihao<span class="badge">4</span></a>
    <a href="#" class="list-group-item">nihao<span class="badge">4</span></a>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">panel-title</h3>
    </div>
    <div class="panel-body">
      panel-body
    </div>
    <table class="table table-bordered">
      <thead>
        <th>姓名</th>
        <th>电话</th>
      </thead>
      <tbody>
        <tr>
          <td>cding</td>
          <td>18020287910</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <table class="table table-bordered">
      <thead>
        <th>姓名</th>
        <th>电话</th>
      </thead>
      <tbody>
        <tr>
          <td>cding</td>
          <td>18020287910</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cding">
  dianji
</button>
<div class="modal fade" id="cding" tabindex="-1" role="dialog" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" >&times;</button>
        <h4 class="modal-title" id="my">kjdghjkdfgjk</h4>
      </div>
      <div class="modal-body">
        <p>dsakjfhksjafhsajdfsalf</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">open</button>
      </div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" href="https://www.baidu.com" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<!-- <nav class="navbar navbar-default">
  <div class="container"> -->
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div> -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav> -->

<!-- <ul class="nav nav-tabs">
  <li><a href="#">click1</a></li>
  <li><a href="#">click2</a></li>
</ul>

<ul class="nav nav-pills">
  <li><a href="#">click1</a></li>
  <li><a href="#">click2</a></li>
</ul> -->
<style>
  .a{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
  }
</style>
  <style media="screen">
    .flex{
      display: flex;
      /* flex-direction: row;
      flex-wrap: wrap; */
      flex-flow:row wrap;
      width: 420px;
      height:400px;
      justify-content: space-between;
      align-items: flex-start;
      align-content: space-around;
    }
    .flex-item{
      padding: 10px;
      width: 50px;
      background: #ddd;
      border: 1px solid #eee;
      border-radius: 5px;
      /* order:2 */
    }

    .flex-item2{
      padding: 10px;
      width: 77px;
      background: #ddd;
      border: 1px solid #eee;
      border-radius: 5px;
      height: 77px;
      order:-1;
      /* flex-grow: 2; */
    }
  </style>
  <div class="jumbotron">
    <div class="container">
      <h3>flex</h3>
      <div class="flex">
        <div class="flex-item text-center">
          1
        </div>
        <div class="flex-item text-center">
          2
        </div>
        <div class="flex-item2 text-center">
          3
        </div>
        <div class="flex-item text-center">
          4
        </div>
        <div class="flex-item2 text-center">
          5
        </div>
        <div class="flex-item text-center">
          1
        </div>
        <div class="flex-item2 text-center">
          2
        </div>
        <div class="flex-item text-center">
          3
        </div>
        <div class="flex-item text-center">
          4
        </div>
        <div class="flex-item text-center">
          5
        </div>
        <div class="flex-item text-center">
          1
        </div>
        <div class="flex-item text-center">
          2
        </div>
        <div class="flex-item text-center">
          3
        </div>
        <div class="flex-item text-center">
          4
        </div>
        <div class="flex-item text-center">
          5
        </div>
        <div class="flex-item text-center">
          1
        </div>
        <div class="flex-item text-center">
          2
        </div>
        <div class="flex-item text-center">
          3
        </div>
        <div class="flex-item text-center">
          4
        </div>
        <div class="flex-item text-center">
          5
        </div>
        <div class="flex-item text-center">
          1
        </div>
      </div>
    </div>
  </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
  </body>
</html>
